<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米导航</title>
        <style type="text/css">
            body { margin: 0 ; padding : 0 ; background-color: #efefef; }
            /* .header 元素宽度 占 body 元素的 100% */
            .header { height: 100px ; width: 100% ; background-color: #ffffff ; position: relative ; /* 让 .header 采用 非 static 定位是为了让 后代元素有机会参照自己定位 */  }

            /* .site-header 元素 在 .header 的正中间 */
            .site-header { width: 1226px ; height: 100px ; margin: 0 auto ; font-size: 0px ;   }

            /* 使用 inline-block 将 .logo 、.nav 、.search 三个元素放在统一行 */
            .logo { display: inline-block ; font-size: 16px ; width: 80px ; height: 100px ;  }


            .nav { display: inline-block ; font-size: 16px ; width: 850px ; height: 100px ;   }
            /* 后代选择器 ( 祖先 和 后代 之间 使用空格隔开 ) */
            .nav .item { height: 100px ; width: 84px ; box-shadow: 0 0 0 1px grey inset ; }

            /* 后代选择器 ( 祖先 和 后代 之间 使用空格隔开 ) */
            .nav .title { height: 100px ; width: 84px ; text-align: center ; line-height: 100px ; background-color: #1e9fff; display: inline-block ; }

            .nav .children {
                background-color: #9932CC ;
                position: absolute ; /* 相对于 首个 非static 定位的父元素进行定位 ( 从自己开始逐层往上找 ) */
                left : 0 ;
                top : 100px ;
                font-size: 0px ; /* 为了解决 inline-block 元素之间的空白间隙问题 */
                width: 100% ;  /* 当元素采用 absolute 定位方式后，宽度不再是 父元素的 100% */
                height: 0px ;
                overflow: hidden ;
                transition-property: height ;
                transition-duration: 1s ;
                transition-delay: 100ms ;
                transition-timing-function: linear ;
            }

            /* 当鼠标悬浮到 .nav 内部 的 .item 时 让 其 后代 .children 高度发生变化 */
            .nav .item:hover .children { height: 200px ;  }

            .nav .children .child { border: 1px solid blue ; width: 180px ; display: inline-block ; font-size: 12px ; }
            /* 后代选择器 ( 祖先 和 后代 之间 使用空格隔开 ) */
            .nav .children .child a { text-decoration: none ; text-align: center ; display: block ; }

            /* 后代选择器 ( 祖先 和 后代 之间 使用空格隔开 ) */
            .nav .children .child a img { width: 160px ; height: 110px ; }

            .nav .children .child .price { margin: 0 ; color: red ;  }

            .search { display: inline-block ; font-size: 16px ;  width: 296px ; height: 100px ;   }
        </style>
    </head>
    <body>

        <!-- .header 占满 body 的整行-->
        <div class="header">
            <!-- .site-header 在 .header 的正中间 -->
            <div class="site-header">
                <div class="logo">logo</div>
                <div class="nav">
                    <div class="item">
                        <span class="title">小米手机</span>
                        <div class="children">
                            <div class="child">
                                <a href="">
                                    <img src="xiaomi-10.png" class="image">
                                    <div class="name">小米10</div>
                                    <p class="price">3999元起</p>
                                </a>
                            </div>
                            <div class="child">
                                <a href="">
                                    <img src="xiaomi-10.png" class="image">
                                    <div class="name">小米10</div>
                                    <p class="price">3999元起</p>
                                </a>
                            </div>
                            <div class="child">
                                <a href="">
                                    <img src="xiaomi-10.png" class="image">
                                    <div class="name">小米10</div>
                                    <p class="price">3999元起</p>
                                </a>
                            </div>
                            <div class="child">
                                <a href="">
                                    <img src="xiaomi-10.png" class="image">
                                    <div class="name">小米10</div>
                                    <p class="price">3999元起</p>
                                </a>
                            </div>
                            <div class="child">
                                <a href="">
                                    <img src="xiaomi-10.png" class="image">
                                    <div class="name">小米10</div>
                                    <p class="price">3999元起</p>
                                </a>
                            </div>
                        </div>
                    </div>
<!--                    <div>Redmi 红米</div>-->
<!--                    <div>电视</div>-->
<!--                    <div>笔记本</div>-->
<!--                    <div>家电</div>-->
<!--                    <div>路由器</div>-->
<!--                    <div>硬件智能</div>-->
<!--                    <div>服务</div>-->
<!--                    <div>社区</div>-->
                </div>
                <div class="search">
                    search
                </div>
            </div>
        </div>

    </body>
</html>